import React, { useState, useEffect } from 'react'
import { View, Text, Image, } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import { AtSearchBar, AtIcon, AtInput } from 'taro-ui'
import externalLink from '../../assets/img/external-link.png'
import message from '../../assets/img/message.png'
import heart1 from '../../assets/img/heart.png'
import heart2 from '../../assets/img/heart-2.png'
import './index.less'
import {timeFormat} from '../../assets/utils/index'
export default (props: any) => {
  const [heart, setHeart] = useState(false)
  const [isShow, setIsShow] = useState(false)
  const [isShowAll, setIsShowAll] = useState(false)
  const [showContent, setShowContent] = useState('')
  const imgPreview = (data: any) => {
    Taro.previewImage({
      current: data[0], // 当前显示图片的http链接
      urls: data // 需要预览的图片http链接列表
    })
  }

  const { list } = props
  const {
    avatarUrl,
    nickName,
    numComment,
    numLike,
    src, content, atType, createTime } = list

  useEffect(() => {
    showText()
  }, [props.content])
  const showText = () => {
    if (content.length > 20) {
      setIsShow(true)
      const str = content.substring(0, 55)
      setShowContent(str)
    } else {
      setShowContent(content)
    }
  }
  //展开点击事件
  const openText = () => {
    if (isShowAll) {
      const str = content.substring(0, 55)
      setShowContent(str)
    } else {
      setShowContent(content)
    }
    setIsShowAll(!isShowAll)
  }
  return (
    <View className='article'>
      <View className='title'>
        <View className='nickName'>
          <Image className='n1' src={avatarUrl} />
          <View className='n2'>
            <View className='nick'>{nickName}</View>
            <View className='time'>{timeFormat(new Date(createTime),'second')}</View>
          </View>
        </View>
        <View className='follow'>
          <AtIcon className='followIco' value='add' size='14' color='#08CBCD'></AtIcon>关注
        </View>
      </View>
      <View className='text'>
        <Text className='textWord'>{showContent}</Text>
        {
          content.length > 55 ? <Text onClick={openText}>
            {isShow && !isShowAll && <Text className='dot'>...</Text>}

            {isShow && <Text className='showText' >{isShowAll ? '收起' : '全文'}</Text>}
          </Text> : ''
        }
      </View>
      {
        src.length && atType === 1 ? <View className={src.length === 4 ? 'imgUl imgUlp' : 'imgUl'}>
          {
            src.map((item: any) => (
              <View className={src.length === 1 ? 'imgLi imgw1' : 'imgLi imgw2'} onClick={() => { imgPreview(src) }}>
                <View className='figure' style={{ backgroundImage: `url(${item})` }}>
                </View>
              </View>
            ))
          }
        </View> : <View></View>
      }
      <View className='toolUl'>
        <View className='toolLi'>
          <Image className='externalLink' src={externalLink}></Image>
        </View>
        <View className='toolLi'>
          <Image className='message' src={message}></Image>
          <Text className='messageNum'>{numComment}</Text>
        </View>
        <View className='toolLi' onClick={() => { setHeart(!heart) }}>
          {
            heart ? <Image className='message' src={heart2}></Image> : <Image className='message' src={heart1}></Image>
          }
          <Text className='heartNum' style={{ color: heart ? '#08CBCD' : '#A7A7A7' }}>{numLike}</Text>
        </View>
      </View>
    </View>
  )
}
